<template>
    <div class="list1">
        <!-- <div class="bscroll"> -->
        <vue-better-scroll class="wrapper"
                           ref="scroll0"
                           :scrollbar="scrollbarObj"
                           :pullDownRefresh="pullDownRefreshObj"
                           :pullUpLoad="pullUpLoadObj"
                           :startY="parseInt(startY)"
                           @pullingDown="onPullingDown"
                           @pullingUp="onPullingUp">
            <div class="bscroll-container">
                <!-- 头部 -->
                <!-- <div class="header">
                            <x-icon type="ios-arrow-left" size="" class="icon-white" @click="$router.go(-1)"></x-icon>选择检查单位
                    </div>-->
                <!-- 内容部分 -->
                <div class="list1_main">
                    <div class="searchDiv">
                        <input type="text"
                               v-model="param.fillname"
                               class="search"
                               placeholder="输入关键字搜索"
                               @keyup="search" />
                    </div>
                    <noData v-if="listArr == 0"></noData>
                    <ul class="list1Box">
                        <li v-for="(item,index) in listArr"
                            :key="index"
                            @click="$router.push({path:'./systemDestail',query:{Id:item.ID}})">
                            <h6>{{item.FileName}}</h6>
                            <p>
                                文号/标准号: {{item.FileNumber}}
                                <x-icon type="ios-arrow-right"
                                        size="20"></x-icon>
                            </p>
                            <p>实施日期: {{item.ImplementDate}}</p>
                        </li>

                    </ul>
                </div>
            </div>
        </vue-better-scroll>
        <!-- </div> -->
        <myMenu @clickBack="back"></myMenu>
    </div>
</template>
<script>
import { Radio, Group, Actionsheet } from 'vux'

import myMenu from '@/commonComponents/menu'
import { GetStatutesFG } from '@/api/api'
import VueBetterScroll from 'vue2-better-scroll'
export default {
    components: {
        Radio,
        Group,
        myMenu,
        VueBetterScroll
    },
    data () {
        return {
            radios: '',
            listArr: [],
            list: [],
            param: {
                userId: '',
                fillname: ''
            },
            flag: false,
            // dropDown: false
            // 这个配置可以开启滚动条，默认为 false。当设置为 true 或者是一个 Object 的时候，都会开启滚动条，默认是会 fade 的
            scrollbarObj: {
                fade: true
            },
            // 这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
            pullDownRefreshObj: false,
            // 这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机
            pullUpLoadObj: {
                threshold: 0,
                txt: {
                    more: '加载更多',
                    noMore: '没有更多数据了'
                }
            },
            startY: 0, // 纵轴方向初始化位置
            scrollToTime: 400,
            param1: {
                allowPaging: true,
                business: 'GetStatutes',
                data: {
                    Type: '',
                    FileName: ''
                },
                pageIndex: 0,
                pageSize: 20,
                tokenId: '',
                userId: ''
            },
            listCount: 0,
            listAllCount: 0
        }
    },
    created () {
        var token = JSON.parse(window.localStorage.getItem('userInfo'))
        this.param.userId = token.userid
        this.$vux.loading.show({
            text: '加载中...'
        })
        this.param1.pageIndex = 0
    },
    mounted () {
        var token = JSON.parse(window.localStorage.getItem('userInfo'))

        this.param.userId = token.userid
        this.onPullingDown()
    },
    methods: {
        back () { },
        change (value, label) {
            //   console.log("change:", value, label);
            if (value) {
                window.sessionStorage.setItem('name1', value)
            }
            for (var k in this.list) {
                if (this.list[k].deptName == value) {
                    window.sessionStorage.setItem('id1', this.list[k].deptId)
                    this.$router.go(-1)
                }
            }
        },
        getData () {
            this.param1.data.Type = decodeURIComponent(this.$route.query.item)
            this.param1.data.FileName = this.param.fillname
            this.param1.userId = this.param.userId
            return this.$axiosAjax.getConfigJson(this.param1)
        },
        // getList() {

        //   this.param1.data.Type = decodeURIComponent(this.$route.query.item);
        //   this.param1.data.FileName = this.param.fillname;
        //   this.param1.userId = this.param.userId;
        //   GetStatutesFG(this.param1)
        //     .then(res => {
        //        if (res.code == 0) {
        //         this.listArr = res.data;

        //         this.$vux.loading.hide();
        //       } else {
        //         this.$vux.toast.text(res.data.info);
        //       }
        //     })
        //     .catch(() => {});
        //  },
        // 模拟下拉刷新
        onPullingDown () {
            let that = this
            this.getData().then(res => {
                // console.log(res)
                if (res.data.code === 0) {
                    that.listArr = res.data.data
                    that.listCount = that.listArr.length
                    that.listAllCount = res.data.count
                    that.$vux.loading.hide()
                }
                this.$forceUpdate()
                this.$nextTick(() => {
                    if (that.listCount < that.listAllCount) {
                        that.$refs.scroll0.forceUpdate(true)
                    } else {
                        that.$refs.scroll0.forceUpdate(false)
                    }
                })
            }).finally(() => {
                that.$vux.loading.hide()
            })
        },
        // 模拟上拉 加载更多数据
        onPullingUp () {
            let that = this
            this.param1.pageIndex++
            this.getData().then(res => {
                // console.log(res)
                if (res.data.code === 0) {
                    that.listArr = that.listArr.concat(res.data.data)
                    that.listCount = that.listArr.length
                }
                if (that.listCount < that.listAllCount) {
                    that.$refs.scroll0.forceUpdate(true)
                } else {
                    that.$refs.scroll0.forceUpdate(false)
                }
            }).finally(() => {
                that.$vux.loading.hide()
            })
        },
        search () {
            // alert(222)
            this.onPullingDown()
        }
        // onPullingDown() {
        //   console.log("xl");
        // },
        // onPullingUp() {

        //   this.param1.pageIndex++;
        //   GetStatutesFG(this.param1)
        //     .then(res => {
        //       if (res.code === 0) {
        //         this.listArr = this.listArr.concat(res.data);
        //         this.listCount = this.listArr.length;
        //         this.listAllCount = res.count;
        //         if (this.listCount < this.listAllCount) {
        //           this.$refs[`scrollqq`].forceUpdate(true);
        //         } else {
        //           this.$refs[`scrollqq`].forceUpdate(false);
        //         }
        //       }
        //     })
        //     .catch(() => {
        //       console.log("error");
        //     })
        //     .finally(() => {
        //       this.$vux.loading.hide();
        //       this.flag = true;
        //     });
        // }
    },
    watch: {
        'param.fillname' (val) {
            this.getList()
        }
    }
}
function getResult (val) {
    let rs = []
    for (let i = 0; i < 20; i++) {
        rs.push({
            title: `${val} result: ${i + 1} `,
            other: i
        })
    }
    return rs
}
</script>
<style lang="less" scope>
// .bscroll {
//     position: absolute;
//     top: 0;
//     bottom: 0;
//     left: 0;
//     right: 0;
//     overflow: hidden;
// }
.list1 {
    width: 100%;
    height: 100%;
    background-color: #ebeef2;
    .list1_main {
        width: 100%;
        background-color: #ebeef2;
        .searchDiv {
            background-color: #ebeef2;
            padding: 10px 0;
            .search {
                width: 360px;
                margin: 0 auto;
                height: 40px;
                line-height: 40px;
                padding-left: 10px;
                box-sizing: border-box;
                border-radius: 10px;
                display: block;
                border: 1px solid #999;
            }
        }
        .list1Box {
            width: 100%;
            background-color: #fff;
            padding: 0 16px;
            li {
                height: 82px;
                border-bottom: 1px solid #f0eff4;
                padding: 4px;
                position: relative;
                h6 {
                    line-height: 28px;
                    color: #333;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }
                p {
                    line-height: 24px;
                    color: #666;
                }
                .vux-x-icon {
                    fill: #999;
                    float: right;
                    position: absolute;
                    width: 20px;
                    height: 20px;
                    top: 30px;
                    right: 0;
                }
            }
            .weui-search-bar__cancel-btn {
                display: none;
            }
            .weui-cells {
                margin-top: 2px;
            }
        }
    }
    .weui-cell:before {
        left: 0;
    }
    .weui-cell__bd p {
        width: 316px;
    }
}
.institution {
    .downDialogBox {
        .institution_mask {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1 !important;
        }
        .downDialog {
            box-sizing: border-box;
            text-align: center;
            width: 290px;
            height: 150px;
            position: absolute;
            top: 110px;
            left: 44px;
            z-index: 2;
            background-color: #fff;
            border-radius: 20px;
            padding-top: 20px;
            .downmsg_tit {
                height: 55px;
                line-height: 55px;
                font-size: 16px;
                font-weight: bold;
                color: #333;
            }
            .btns {
                padding-top: 10px;
                .cancelbtn {
                    width: 80px;
                    height: 40px;
                    background-color: #ffb400;
                }
                .confirmbtn {
                    width: 80px;
                    height: 40px;
                }
            }
            .closebtn {
                width: 16px;
                height: 16px;
                background: url('../../../static/images/closebtn.png') no-repeat
                    left top;
                background-size: 16px 16px;
                position: absolute;
                top: -27px;
                right: 0;
            }
        }
    }
}
</style>
